import React, { useState } from "react";
import { Card, Avatar, List, Tag, Row, Col, Tabs, Typography } from "antd";
import { UserOutlined } from "@ant-design/icons";
import "./index.less";

const { Title, Text, Paragraph } = Typography;
const { TabPane } = Tabs;

const Profile: React.FC = () => {
  const [activeTab, setActiveTab] = useState("1");

  const userInfo = {
    name: "Serati Ma",
    avatar: "https://joeschmoe.io/api/v1/random",
    signature: "海纳百川，有容乃大",
    title: "交互专家",
    company: "蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED",
    location: "浙江省杭州市",
    tags: ["很有想法的", "专注设计", "辣~", "大长腿", "川妹子", "海纳百川"],
    teams: [
      { name: "科学搬砖组", avatar: "https://joeschmoe.io/api/v1/random" },
      { name: "全组都是吴彦祖", avatar: "https://joeschmoe.io/api/v1/random" },
      { name: "中二少女团", avatar: "https://joeschmoe.io/api/v1/random" },
      { name: "程序员日常", avatar: "https://joeschmoe.io/api/v1/random" },
      { name: "逼格设计天团", avatar: "https://joeschmoe.io/api/v1/random" },
      { name: "骗你来学计算机", avatar: "https://joeschmoe.io/api/v1/random" },
    ],
  };

  const articles = [
    {
      title: "Alipay",
      tags: ["Ant Design", "设计语言", "蚂蚁金服"],
      description:
        "段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。",
      author: "付小小",
      avatar: "https://joeschmoe.io/api/v1/random",
      publishTime: "2025-05-12 15:48",
      likes: 117,
      hearts: 196,
      comments: 16,
      url: "https://ant.design",
    },
    {
      title: "Angular",
      tags: ["Ant Design", "设计语言", "蚂蚁金服"],
      description:
        "段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。",
      author: "曲丽丽",
      avatar: "https://joeschmoe.io/api/v1/random",
      publishTime: "2025-05-12 13:48",
      likes: 146,
      hearts: 187,
      comments: 18,
      url: "https://ant.design",
    },
    {
      title: "Ant Design",
      tags: ["Ant Design", "设计语言", "蚂蚁金服"],
      description:
        "段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。",
      author: "林东东",
      avatar: "https://joeschmoe.io/api/v1/random",
      publishTime: "2025-05-12 11:48",
      likes: 125,
      hearts: 131,
      comments: 18,
      url: "https://ant.design",
    },
  ];

  return (
    <div className="pro-profile" data-oid="r701-sm">
      <Row gutter={[24, 24]} data-oid="fg9eiiu">
        <Col span={8} data-oid="3p9415c">
          <Card className="pro-card" data-oid="vg-uxq7">
            <div className="pro-user-info" data-oid="vb7s:cs">
              <Avatar size={100} src={userInfo.avatar} data-oid="ynask-h" />
              <Title level={2} data-oid="wltpx8t">
                {userInfo.name}
              </Title>
              <Text type="secondary" data-oid="on9:r8i">
                {userInfo.signature}
              </Text>
              <div className="pro-user-tags" data-oid="t.jt708">
                <Tag data-oid="m_dzr9z">{userInfo.title}</Tag>
                <Tag data-oid="2lkawps">{userInfo.company}</Tag>
                <Tag data-oid="yy1g67g">{userInfo.location}</Tag>
              </div>
              <div className="pro-user-tags" data-oid="aa-ustn">
                {userInfo.tags.map((tag) => (
                  <Tag key={tag} data-oid=":x0yh8v">
                    {tag}
                  </Tag>
                ))}
              </div>
            </div>
            <div className="pro-teams" data-oid="w:eksuv">
              <Title level={4} data-oid="k79b:jr">
                团队
              </Title>
              <List
                itemLayout="horizontal"
                dataSource={userInfo.teams}
                renderItem={(team) => (
                  <List.Item data-oid="k452zu2">
                    <List.Item.Meta
                      avatar={<Avatar src={team.avatar} data-oid="axlmatx" />}
                      title={<Text data-oid="i7xatkw">{team.name}</Text>}
                      data-oid="m06ivx8"
                    />
                  </List.Item>
                )}
                data-oid="02dc6l2"
              />
            </div>
          </Card>
        </Col>

        <Col span={16} data-oid="7-bg8tm">
          <Card className="pro-card" data-oid="pq6y15n">
            <Tabs
              activeKey={activeTab}
              onChange={setActiveTab}
              data-oid="ds95:d2"
            >
              <TabPane
                tab={`文章 (${articles.length})`}
                key="1"
                data-oid="3d60.3-"
              >
                <List
                  itemLayout="vertical"
                  dataSource={articles}
                  renderItem={(article) => (
                    <List.Item className="pro-article-item" data-oid="u3f5ta8">
                      <Title level={3} data-oid="::3nujg">
                        {article.title}
                      </Title>
                      <div className="pro-article-tags" data-oid="xrqk4.p">
                        {article.tags.map((tag) => (
                          <Tag key={tag} data-oid="jxna8ku">
                            {tag}
                          </Tag>
                        ))}
                      </div>
                      <Paragraph
                        className="pro-article-description"
                        data-oid="33.9hk_"
                      >
                        {article.description}
                      </Paragraph>
                      <div className="pro-article-info" data-oid=".d4h9ed">
                        <List.Item.Meta
                          avatar={
                            <Avatar src={article.avatar} data-oid="gz_0tea" />
                          }
                          title={
                            <span data-oid="kdzgm.p">
                              {article.author} 发布在{" "}
                              <a href={article.url} data-oid="zgmj.55">
                                {article.url}
                              </a>{" "}
                              {article.publishTime}
                            </span>
                          }
                          data-oid="qt97ukw"
                        />

                        <div className="pro-article-actions" data-oid="f0x1:yg">
                          <Text type="secondary" data-oid="3cut-_l">
                            ★ {article.likes}
                          </Text>
                          <Text type="secondary" data-oid=".84izx1">
                            ❤ {article.hearts}
                          </Text>
                          <Text type="secondary" data-oid="j5b51sc">
                            💬 {article.comments}
                          </Text>
                        </div>
                      </div>
                    </List.Item>
                  )}
                  data-oid="5gp:8:g"
                />
              </TabPane>
              <TabPane tab="应用 (8)" key="2" data-oid="6if41iu">
                <div className="pro-empty-content" data-oid="b6o69ky">
                  暂无数据
                </div>
              </TabPane>
              <TabPane tab="项目 (8)" key="3" data-oid="lm4ooc1">
                <div className="pro-empty-content" data-oid="4xp_axo">
                  暂无数据
                </div>
              </TabPane>
            </Tabs>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Profile;
